<template>
    <div class="container">
        <el-row>
            <el-col :span="2"></el-col>
            <el-col :span="12">
                <img src="../../assets/img/bg.svg"  alt="" class="bg">
            </el-col>
            <el-col :span="2"></el-col>
            <el-col :span="8" style="margin-top: 10%;">
                <div class="login_box">
                    <div class="avatar_box">
                    <img src="../../assets/img/logo.svg" alt="">
                    </div>
                    <el-form label-width="0" class="login_form">
                        <el-form-item >
                            <el-input size="large" :clearable="true" v-model="username" placeholder="用户名">
                                <template #prepend>
                                    <el-button :icon="User" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item >
                            <el-input size="large" :clearable="true" v-model="password" :show-password="true" type="password" placeholder="密码">
                                <template #prepend> 
                                    <el-button :icon="Lock" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item >
                            <el-input size="large" :clearable="true" v-model="confirmedPassword" :show-password="true" type="password" placeholder="确认密码">
                                <template #prepend> 
                                    <el-button :icon="Lock" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item >
                            <el-input size="large" :clearable="true" v-model="phone" placeholder="联系方式">
                                <template #prepend> 
                                    <el-button :icon="Phone" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item >
                            <el-select  placeholder="选择角色" v-model="role">
                                <el-option label="负责人" value="ROLE_BOSS"></el-option>
                                <el-option label="普通用户" value="ROLE_USER"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="btns" style="margin-top: 20px;">
                            <el-button type="success" @click="register" >注册</el-button>
                            <el-button type="info" @click="handlerEmpty">重置</el-button>
                            <router-link :to="{path:'/login'}">
                                <el-button type="primary" style="margin-left: 212px;">登录</el-button>
                            </router-link>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import {ref} from 'vue'
    import request from '@/utils/request'
    import {User,Lock,Phone} from '@element-plus/icons-vue'
    import {ElMessage} from 'element-plus'
    export default{
        name:'UserRegister',
        setup() {
            let username = ref('');
            let password = ref(''); 
            let confirmedPassword = ref('');
            let phone = ref('')
            let role = ref('')
            const icon = {User,Lock,Phone};
            const handlerEmpty = function(){
                username.value = "",
                password.value = "",
                confirmedPassword.value = ""
                phone.value = ""
            }
            let register = () => {
                request({
                    url:'/user/register/',
                    method:'post',
                    data:{
                        username:username.value,
                        password:password.value,
                        confirmedPassword:confirmedPassword.value,
                        phone:phone.value,
                        role:role.value
                    },
                }).then((resp) => {
                    if(resp.message === 'success'){
                        ElMessage({message: '注册成功!',grouping: true,type: 'success'})
                        
                    }else if(resp.message === 'usernameError'){
                        ElMessage({message: '注册失败，用户名已存在!',grouping: true,type: 'error'})
                    }else if(resp.message === 'PsShort'){
                        ElMessage({message: '密码太短了!',grouping: true,type: 'warning'})
                    }else{
                        ElMessage({message: '两次输入的密码不一致!',grouping: true,type: 'warning'})
                    }
                }).catch(() => {
                });
            }
            return {
                ...icon,
                username,
                password,
                confirmedPassword,
                phone,
                role,
                handlerEmpty,
                register
            }
        },
    }
</script>
<style scoped> 
    .container{ 
        width: 100vw;
        height: 100vh;
        background-color:  #a0cfff;
    }
    .bg{
        height: 90vh;
    }
    .login_box{
        width: 450px;
        height: 470px;
        background-color: rgba(36, 223, 244, 0.9);
        border-radius: 3px;
        position: relative;
        border-radius: 5%;
        border: 3px solid rgb(8, 182, 217);
        top: 50px;
        left: -50px;
        text-align: center;
  }

    .avatar_box{
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left:50%;
        transform: translate(-50%,-50%);
        background-color: rgb(228, 193, 193);
    }

    .avatar_box img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

</style>